<template>
	<view>
		<!-- 头部导航 -->
		  <uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed='true' color="#fff" title="租赁订单对账单" left-icon="left" right-text="新增" @clickLeft="backFn" @clickRight="addFn"></uni-nav-bar>
		  <!-- 筛选栏 -->
		  <view class="">
		  	<view style="position: fixed;z-index: 100;width:100%;">
		  		<uni-row class="demo-uni-row">
		  			<uni-col :span="10">
		  				<zb-dropdown-menu  style="width: 100%" z-index="12">
		  				  <zb-dropdown-item v-model="formData.status"  :options="options" @change="changeFn" ></zb-dropdown-item>
		  				</zb-dropdown-menu>
		  			</uni-col>
		  			<uni-col :span="1">
		  				<view class="title"  style="color:#c3c3c3">|</view>
		  			</uni-col>
		  			<uni-col :span="6" >
		  				<view @click="OpenP" class="title">筛选</view>
		  			</uni-col>
		  			<uni-col :span="1">
		  				<view class="title"  style="color:#c3c3c3">|</view>
		  			</uni-col>
		  			<uni-col :span="6">
		  				<view class="title">
		  					<uni-icons  type="search" size="24" color="#c3c3c3"></uni-icons>
		  				</view>
		  			</uni-col>
		  		</uni-row>
		  	</view>
		  	<view style="width:100%;height: 88rpx;display: block"></view>
		  </view>
		  <u-swipe-action  :autoClose='true' >
			  <view   v-for="item in list" :key="item.id">
				    <u-swipe-action-item :disabled="disabledShow"  :options="options1" @click="delBtn" :name="item.id">
						<view class="application" @click="toStatementInfo(item.id)" >
							<view class="application_one">{{item.number}}</view>
							<view class="desc">客户名：{{item.customerName}}</view>
							<view class="desc">签订人：{{item.signRenName}}</view>
							<view class="desc">申请日期：{{item.applyDate}}</view>
							<view class="desc">
								<view>
									<span>状态：</span>
									<span class="desc_text" v-if="item.status==1">正常</span>
									<span class="desc_text" v-if="item.status==2">完结</span>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
					
			  </view>
		  </u-swipe-action>
		  <view v-if="list.length ==0 " class="BGC"></view>
		  
		  <!-- 消息提示 -->
		  <u-toast ref="uToast"></u-toast>
		  <!-- 筛选弹框 -->
		  	<u-popup :closeable="true" :show="show" customStyle="margin-top:44px;padding-left:10px" overlayStyle="margin-top:44px"  mode="right" :closeOnClickOverlay="true"  @close="show=false"  >
				<view style="width: 100%;height: 50px;line-height: 50px;font-size: 20px;color: #fd9540;">
					筛选
				</view>
				<u--form :model="formData" labelWidth="100px" >
					<u-form-item borderBottom label="对账单编号" prop="number" >
						<u--input  v-model="formData.number"   border="none" placeholder='请输入对账单编号'></u--input>	 
					</u-form-item>
						<u-form-item  borderBottom label="客户名称" prop="customerName"  >
							<u--input  v-model="formData.customerName"  border="none" placeholder='请输入客户名称'></u--input>
						</u-form-item>
							<u-form-item borderBottom label="租赁订单编号" prop="orderNo" >
								<u--input  v-model="formData.orderNo"   border="none" placeholder='请输入租赁订单编号'></u--input>	 
							</u-form-item>
					<u-button text="查询" style="width: 100px;height: 30px;" size="mini" type="success"  @click="Seacrch"></u-button>
				</u--form>
			</u-popup>
			
	</view>
</template>

<script>
	import {getDicts} from '@/api/dictionary/index.js'
	import {getStatementListApi,delStatementApi} from '@/api/accountStatement.js'
	export default {
		data() {
			return {
				disabledShow:true,//右滑删除得
				permissions:[],//按钮权限
				list:[],
				formData:{
					pageNum:1,
					pageSize:10,
					contractTemplate:'',
					number:'',
					customerName:'',
					orderNo:'',
					status:''
					
				},
				total:0,
				options:[
					{text:"全部",value:''},
					 {text:"正常",value:1},
					 {text:"完结",value:2},
					 
				],
				options1:[{
					 text: '删除'
				}],
				show:false,
				
				
			};
		},
		onLoad() {
			this.permissions=this.$store.getters.permissions
			this.initData()
			this.getContractTemplate()
			// 控制删除按钮权限出现
			if(this.permissions.includes('*:*:*') ||this.permissions.includes('module:accountStatement:remove')){
			     this.disabledShow=false
			}
		},
		// 上划
		onReachBottom() {
			 if(this.formData.pageSize*this.formData.pageNum<this.total){
				 this.formData.pageNum++
				 let res=getStatementListApi(this.formData).then(reponse=>{
				 			 this.list.push(...reponse.rows)
							  console.log(this.list);
				 })
				
			 }else{
				 console.log('已经加载完毕');
			 }
		},
		// 下拉
		async onPullDownRefresh() {
			this.list=[]
			this.formData={
				pageNum:1,
				pageSize:10,
				contractTemplate:'',
				number:'',
				customerName:'',
				orderNo:''
				
			}
			await this.initData()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},3000)
		},
		methods:{
			
			// s点击筛选
			OpenP(){
				this.show=true
			},
			async Seacrch(){
				this.show=false
				let res=await getStatementListApi(this.formData) 
				this.list=res.rows
			},
			async initData(){
				let res=await getStatementListApi(this.formData) 
				this.list=res.rows
				this.total=res.total
			},
			backFn(){
				 uni.navigateBack({delta:1})
			},
			// 获取合同模板
			getContractTemplate(){
				let newArr=[]
				getDicts('biz_contract_template').then(res=>{
					newArr=res.data.map((item)=>{
						return {text:item.dictLabel,value:item.dictValue}
					})
					// this.options=this.options.concat(newArr)
				})
			},
			toStatementInfo(id){
				console.log(id);
				uni.navigateTo({
					url:"/pages/accountStatement/StatementInfo/StatementInfo?id="+id
				})
			},  
			addFn(){
				if(this.permissions.includes('*:*:*')  || this.permissions.includes('module:accountStatement:add')){
					uni.redirectTo({
						url:'/pages/accountStatement/addStatement/addStatement'
					})
				}else{
					this.$refs.uToast.show({
					   type:'default',
					   message:'您没有权限新增对账单！'
					})
				}
			},
			// 删除
			async delBtn(e){
				await delStatementApi(e.name)
				this.$refs.uToast.show({
					message:'删除成功！',
				})
				this.initData()
			},
			changeFn(e){
				this.formData.contractTemplate=e.value
				this.initData()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.BGC{
		width: 100%;
		min-height: 400px;
		background-image: url('@/static/images/bgc.png');
		background-size:100% 200px;
		background-repeat: no-repeat;
			margin: 200px 0;
	}
	// 下拉选择框
	.demo-uni-row {
		margin-bottom: 10px;
			// position: fixed;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
			
			.title{
				height:48px;
				line-height: 48px;
				background-color: #ffffff;
				text-align: center;
				font-size: 16px;
			}
	}
.application{
		  position: relative;
		  min-height: 50px;
		  padding: 10px;
		  margin: 10px 5px;
		  background-color: #fff;
		  border: solid 1px #c3c3c3;
		  .application_one{
			  font-size: 16px;
			  font-weight: 600;
			  padding-bottom: 8px;
		  }
		  .desc{
			  font-size: 12px;
			  color:#8c8b8a;
			 .desc_text{
				 color: #fd9540;
			 }
		  }
		  .addapplicaionChild{
			  position: absolute;
			  right: 20px;
			  bottom: 20px;
			  font-size: 5px;
			  color: #fd9540;
		  }
		  
	  }
</style>
